<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>

    <%@include file="/lyear/common/head.jsp" %>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="icon" href="${pageContext.request.contextPath}/lyear/favicon.ico" type="image/ico">
    <meta name="keywords" content="作品,项目,作品展示,作品展示平台">
    <meta name="description" content="作品展示平台">
    <meta name="author" content="hc">
    <link href="${pageContext.request.contextPath}/lyear/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/lyear/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/lyear/css/style.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/lyear/css/upload.css" rel="stylesheet">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="${pageContext.request.contextPath}/uploadimg/jQuery.upload.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/uploadimg/upload.css">
    <!--对话框-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lyear/js/jconfirm/jquery-confirm.min.css">

    <!--meta tags-->
    <meta charset="UTF-8">
    <meta name="description" content="Services Listing HTML5 CSS3 template">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript, services, listing">
    <meta name="author" content="Ui-DesignLab">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--end meta tags-->

    <!--stylesheets-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/mod/vendor/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/mod/vendor/css/animate.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/mod/vendor/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/mod/vendor/perfect-scrollbar/css/perfect-scrollbar.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/mod/css/app.css">
    <!--end stylesheets-->

    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Cairo%7CNosifer%7CPoppins%7CQuicksand:700%7CRaleway%7CTangerine%7CHind+Vadodara"
          rel="stylesheet">
    <!--end google fonts-->

    <%--    页面图片显示简介--%>
    <link href="${pageContext.request.contextPath}/lyear/css/pop.css" rel="stylesheet">
    <%--    页面图片显示简介--%>

</head>
<body>

<!--items wrapper-->

<!--end items wrapper-->
<div class="items-wrapper">
    <div class="items" style="font-size: 16px;background-color: #349eb8;height: 65px">
        <c:forEach items="${categories}" var="category">
            <a href="${pageContext.request.contextPath}/proj/test/${category.pid}/1/12?cid=${category.id}"
               style="font-size: 25px;height: 65px;line-height: 65px;width: auto"><strong>
                <div style="color:black;text-align: center">${category.name}</div>
            </strong></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" name="fid" value="${category.pid}" hidden>
        </c:forEach>


    </div>
    <div style="height: 20px;background-color: white"></div>
    <div class="items">
        <c:forEach items="${pageBean.result}" var="proj">
            <div class="sale-item" style="width: 310px;">
                <div class="view view-first">
                    <img style="width: 290px"
                         src="${proj.img}"/>
                    <div class="mask">
                        <h2>项目简介</h2>
                        <p>${proj.info}</p>
                        <a href="${pageContext.request.contextPath}/comment/showComment/1/10?projId=${projListDTOItem.id}" class="info">项目详情</a>
                    </div>
                </div>
                <div class="sale-item-img">
                    <div class="sale-info" style="background-color: rgba(255,255,255,0)">
                        <strong style="font-size: 16px">${proj.name}</strong>
                        <span class="sale-price">${proj.createTime.toLocalDate()}</span>
                    </div>
                </div>
                <div class="sale-lister" style="overflow: hidden">
                    <c:forEach items="${proj.authorListDTOS}" var="AuthorListDTO">
                        <a href="${pageContext.request.contextPath}/author/getById/${AuthorListDTO.id}">${AuthorListDTO.nickname}</a>&nbsp;
                    </c:forEach>
                </div>
            </div>
        </c:forEach>

    </div>
    <%-- 分页--%>
    <ul class="pagination">
        <c:if test="${pageBean.pageNum <= 1}">
            <li class="disabled"><span>上一页</span></li>
        </c:if>
        <c:if test="${pageBean.pageNum > 1}">
            <li>
                <a href="javascript:void(0);" onclick="page('${pageContext.request.contextPath}/${pageBean.url}','${pageBean.pageNum-1}','${pageSize}')">上一页</a>
            </li>
        </c:if>
        <%--    默认最多只能显示12个页码--%>
        <c:if test="${pageBean.pageNum <7}">
            <c:forEach begin="1" end="${12>pageBean.pages?pageBean.pages:12}" var="index">
                <c:if test="${pageBean.pageNum == index}">
                    <li class="active"><span>${index}</span></li>
                </c:if>
                <c:if test="${pageBean.pageNum != index}">
                    <li>
                        <a href="javascript:void(0);" onclick="page('${pageContext.request.contextPath}/${pageBean.url}','${index}','${pageBean.pageSize}')">${index}</a>
                    </li>
                </c:if>
            </c:forEach>
        </c:if>
        <c:if test="${pageBean.pageNum >= 7}">
            <c:forEach begin="${pageBean.pageNum-6}" end="${pageBean.pages-pageBean.pageNum>5?pageBean.pageNum+5:pageBean.pages}" var="index">
                <c:if test="${pageBean.pageNum == index}">
                    <li class="active"><span>${index}</span></li>
                </c:if>
                <c:if test="${pageBean.pageNum != index}">
                    <li>
                        <a href="javascript:void(0);" onclick="page('${pageContext.request.contextPath}/${pageBean.url}','${index}','${pageBean.pageSize}')">${index}</a>
                    </li>
                </c:if>
            </c:forEach>
        </c:if>

        <c:if test="${pageBean.pageNum >= pageBean.pages}">
            <li class="disabled"><span>下一页</span></li>
        </c:if>
        <c:if test="${pageBean.pageNum < pageBean.pages}">
            <li>
                <a href="javascript:void(0);" onclick="page('${pageContext.request.contextPath}/${pageBean.url}','${pageBean.pageNum+1}','${pageBean.pageSize}')">下一页</a>
            </li>
        </c:if>
    </ul>

    <!--End 分页-->

</div>
<!--chat box-->


<!--end chat box-->

<!--page loader-->
<div class="page-loader">
    <div class="loader"><img src="../../../mod/img/logo.png" alt=""></div>
</div>
<!--end page loader-->


<!--scripts-->
<script src="${pageContext.request.contextPath}/mod/vendor/js/jquery-3.2.1.min.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/js/popper.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/js/alertify.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/js/jquery.knob.min.js"></script>
<!--[if IE]>
<script type="text/javascript" src="${pageContext.request.contextPath}/mod/vendor/js/excanvas.js"></script><![endif]-->
<script src="${pageContext.request.contextPath}/mod/vendor/js/summernote-bs4.min.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/js/dropzone.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/OwlCarousel2-2.2.1/owl.carousel.min.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/mod/vendor/js/typed.js"></script>
<script src="${pageContext.request.contextPath}/mod/js/app.js"></script>
<!--end scripts-->

<script type="text/javascript">
    function page(url,pageNum,pageSize){
        let fid = $("input[name=fid]").val();
        document.location.href= url+"proj/test/"+fid+"/"+pageNum+"/"+pageSize;
    }
</script>

</body>
</html>